<template>
	<view style="background-color: #f9f9f9;">
		
		
       
		<view class="header">
			
			<view class="tempbox">
				<image src="../../static/images/carStat.png" alt="icon" class="temp-icon"></image>
			<span class="temp-text" @click="getServerData()">小车状态</span>
				</view>
		</view>
		
		<view class="center">
			<image class="centerimg" src="../../static/images/carCenter.png" mode=""></image>
		</view>
		<view class="onoffimg">
			
		</view>
<!-- 		<image class="onoffimg" src="../../static/images/carErrorimg.png" mode="aspectFit"></image> -->
		
	<!-- 	  <view v-if="showModal" class="modal-overlay">
		      <view class="modal-content">
		        <view class="modal-header">
		          <span class="modal-title">修改设备属性</span>
		          <span class="close-button" @click="closeModal">&times;</span>
		        </view>
		        <view class="modal-body">
		          <view class="form-group">
		            <label>设备名：</label>
		            <input style="font-size: 20rpx;" type="text" v-model="deviceName"/>
		          </view>
		          <view class="form-group">
		            <label>所属产线：</label>
					<picker class="picker-o" mode="selector" :range="productionLines" @change="productionLineChange">
					  <view class="picker-view">{{ selectedProductionLine }}</view>
					   </picker>
					   
		          </view>
				  <view class="form-group">
				    <label>报警温度：</label>
				    <input style="font-size: 20rpx;" type="text" v-model="alarmTemp"/>
				  </view>
		        </view>
		        <view class="modal-footer">
		          <button class="delete-button" @click="deleteDevice">删除设备</button>
		          <button class="confirm-button" @click="confirmChanges">确认修改</button>
		        </view>
		      </view>
		    </view>
			 -->
		 <view class="container" @click="">
		   <view class="row">
		   				 <view class="label-title">设备信息</view>
		   				 </view>
		   <view class="row">
		     <view class="label">运动状态 :</view> 
				 <input class="input" disabled="true" type="text" v-model="deviceMsg.status"/>
		   </view>
		   <view class="row">
		     <view class="label">到达点位 :</view>
			<!-- {{deviceMsg.path}} -->
		     <input class="input" disabled="true" type="number" v-model="deviceMsg.path.startP" />
		   </view>
		   <view class="row">
		     <view class="label">监控时间（秒）:</view>
		   			<!-- {{deviceMsg.path}} -->
		     <input class="input" type="number" v-model="monitor.monitorConfig.timeout" />
		   </view>
		   <view class="row">
			<button class="header-more" @click="openModal(!$store.state.isCarMonitoring)">开始监控</button>
			<button class="header-more" @click="getServerData()">强制更新</button>
		   </view>
		  </view>
			
			
	</view>
</template>

<script>
	import { listDevice, listDelDevice, listProductionDevice, postDataToAllProduction, postDataToADevice, delDevice, updateDevice, getNavigateUrlBase  } from "@/api/system/device.js";
	
	import msgUtils from "@/plugins/modal.js";
	export default {
		data() {
			return {
					// movementStatus:"",
					// ponit:10,\
					productionLineId: 0,
					deviceName:"",
					monitor:{
						monitorConfig:{
							timeout:10,
							intervalInMs:1500
						}
					},
					device:{},
					postData:{
						type: -2,
						name: "",
						controlMessage: {
							operation: "",
							deviceKey: "",
							requireParams: "false",
							params: {
								status: -2
							},
							deviceSecret: "0"
						}
					},
					deviceMsg:{
						status:"无法获取，请检查产线接口状态并点击开始监控",
						path:{
							startP: -1
						}
					}
				};
			},
			onLoad(option){
				this.$store.state.monitor_reverse_bit = false;
				this.productionLineId = option.pId;
				this.deviceName = option.name;
				this.postData.name = option.name;
				console.log(option.pId)
				console.log(this.$store.state.isCarMonitoring)
				this.getServerData();
				this.openModal(this.$store.state.isCarMonitoring);
			},
	
	 methods: {
		explainData(json_str){
			try{
				console.log(json_str)
				const data = JSON.parse(json_str)
				if (data.car.value != ''){
					this.deviceMsg = data.car.value;
					this.deviceMsg = JSON.parse(this.deviceMsg)
				} else {
					this.deviceMsg = {
						status:"无法获取，请检查产线接口状态并点击开始监控",
						path:{
							startP: -1
						}
					};
				}
				console.log(this.deviceMsg)
				// if(msg != "OK"){
				// 	//变红
				// 	this.opts.colorSatrt='#FFFF00';//黄色
				// 	this.opts.colorEnd='#FF0000';//红色
				// 	setCache("colorOptions", this.opts)
				// 	console.log(111111111)
				// } else {
				// 	//变蓝
				// 	this.opts.colorSatrt='#a4ecff';
				// 	this.opts.colorEnd='#8DC2FF';
				// 	setCache("colorOptions", this.opts)
				// }
			} catch(err){
				console.log(err)
			}
		},
		getPDeviceList() {
			this.loading = true;
			var query = {name: this.deviceName};
		  // console.log(this.productionLineId)
			const promisePDeviceList = new Promise((resolve, reject) => {  
			  // 模拟异步操作  
			  listProductionDevice
			   (this.productionLineId, query).
				   then(response => {
					this.device = response.rows[0];
					this.explainData(this.device.data)
					// console.log(response.rows)
					// console.log(this.device)
					 this.loading = false;
					 resolve(0);
				});
			});
			return promisePDeviceList;
		},
		getServerData() {
			// this.productionLineId = getCache('room')
			
			this.getPDeviceList().then(ret=>{
				console.log(this.device)
				this.postData.type = this.device.type
				
				// this.postData.type = this.device.type
				// this.selectedProductionLineIndex = this.productions.indexOf(this.device.productionName);
			});
			// console.log(this.device)
			// this.explainData(this.device)
		},
		
	    openModal(isCarMonitoring) {
		  // 监控设备的逻辑
		  if(!isCarMonitoring){
			  // msgUtils.msg("不能重复监控！")
			  return 
		  } 
		  let timeout = this.monitor.monitorConfig.timeout
		  let intervalInMs = this.monitor.monitorConfig.intervalInMs
		  
		  msgUtils.msg("准备监控小车")
		  if(isCarMonitoring && !this.$store.state.monitorTimeOutFlag){
		  this.$store.state.monitorFlag = setInterval(()=>{
			  this.getPDeviceList().then(res=>{
				  console.log(res)
				  // console.log(this.$store.state.monitor_reverse_bit)
				  // if(this.$store.state.monitor_reverse_bit){
				  // } else{
				  // }
				  // //console.log(this.$store.state.monitorTimeOutFlag)
				  // this.$store.state.monitor_reverse_bit = !this.$store.state.monitor_reverse_bit;
				  //console.log(this.$store.state.isCarMonitoring)
			  }).catch(err=>{
				  //console.log(err)
				  clearInterval(this.$store.state.monitorFlag)
			  })
		  },intervalInMs)
		  // }
		  // console.log(this.$store.state.monitorTimeOutFlag)
		  // if(isCarMonitoring && !this.$store.state.monitorTimeOutFlag){
			  this.$store.state.monitorTimeOutFlag = setTimeout(()=>{
				  clearInterval(this.$store.state.monitorFlag)
				  this.$store.state.isCarMonitoring=false
				  msgUtils.msgSuccess("结束监控小车")
				  this.$store.state.monitorTimeOutFlag = false
			   },timeout*1000)

			  this.startMonitor().then(res=>{

			  })
			}
			if(isCarMonitoring){
				this.$store.state.isCarMonitoring = isCarMonitoring
			}
	    },
		startMonitor(){
			const data = this.postData;
			data.controlMessage = {
				operation: "getALineDeviceStatus",
				deviceKey: this.device.name,
				requireParams: "true",
				params: {
					lineRequestUrl: "/3D/agv/car"
				},
				deviceSecret: "0"
			}
			data.controlMessage = JSON.stringify(data.controlMessage)
			return this.handleCarMonitor(data)
		},
	   handleCarMonitor(data){
	   	// msgUtils.loading("加载中...")
	   	return new Promise((res,rej)=>{
	   		postDataToADevice(this.monitor.monitorConfig, data).then(res=>{
	   			// msgUtils.closeLoading()
	   			msgUtils.msg("正在监控数据，持续" +this.monitor.monitorConfig.timeout+ "秒")
	   		}).catch(err=>{
	   			reject(err)
	   		})
	   		setTimeout(()=>{
	   			msgUtils.msgSuccess("监控已结束，持续" +this.monitor.monitorConfig.timeout+ "秒")
				console.log(this.$store.state.isCarMonitoring)
	   		},this.monitor.monitorConfig.timeout*1000-500)
	   		resolve("操作成功")
	   	});
	   }
	  }
	}
</script>

<style lang="scss">
	
	@import url("@/css/common.css");
	
	.label-title {
	  flex: 1;
	  text-align: center;
	  // margin-right: 1rpx;
	  // margin-left: 30rpx;
	  height: 60rpx;
	  font-size: 25rpx;
	  color: white;
	}
	
	.container {
		
	  padding: 10rpx 15rpx;
	background-color: #7B79DA; /* 浅蓝色背景 */
	border-radius: 15rpx; /* 弧度 */
		 border: 2rpx solid #ffffff;
	// box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1); /* 投影效果，可选 */
	  height: 610rpx;
	  width: 90%;
	  margin-left: 30rpx;
	  margin-top: 5rpx;
	    // justify-content: center; /* 水平居中 */
	}
	
	.row {
	  display: flex;
	  align-items: center;
	  margin-top: 45rpx;
	  margin-bottom: 70rpx;
	}
	
	.label {
	  flex: 1;
	  text-align: left;
	  margin-right: 0rpx;
	  margin-left: 30rpx;
	  height: 60rpx;
	  font-size: 20rpx;
	  color: white;
	}
	

	.input {
	  flex: 1;
	  border: none; /* 移除所有边框 */
	   border-bottom: 1rpx solid #ffffff; /* 添加白色下划线边框 */
	   border-radius: 0; /* 移除圆角 */
	  padding: 10rpx;
	  width: 20rpx;
	  height: 75rpx;
	  margin-left: 5rpx;
	  margin-right: 30rpx;
	  font-size: 16rpx;
	  color: white;
	}
	
	.input-red {
	  flex: 1;
	  border: none; /* 移除所有边框 */
	   border-bottom: 1rpx solid #ffffff; /* 添加白色下划线边框 */
	   border-radius: 0; /* 移除圆角 */
	  padding: 10rpx;
	  width: 20rpx;
	  height: 75rpx;
	  margin-left: 5rpx;
	  margin-right: 30rpx;
	  font-size: 16rpx;
	  color: indianred;
	}
	
	.header-more{
		
		background-color: #7B79DA; /* 浅蓝色背景 */
			/* 浅蓝色背景 */
			color: white;
			padding: 3rpx 10rpx;
			border:1rpx solid #ffffff;
			
			border-radius: 10rpx;
			/* 圆角边框 */
			cursor: pointer;
			font-size: 19rpx;
			width: 300rpx;
			// margin-top: 4rpx;
			align-items: center;
			height: 100rpx;
		}
	
	
	.onoffimg{
		background: white;
		width: 750rpx;
		height: 110rpx;
		
		display: flex;
		justify-content: center; 
		
		// align-items: center;
	}
	
		
	
		.header{
		  display: flex;
		  justify-content: center; /* 水平居中 */
		  // align-items: center; /* 垂直居中 */
		  height: 32%;
		  background: white;
		}
		.top-right-icon {
		  width: 50rpx; /* 根据实际情况调整大小 */
		  height: 50rpx; 
		 position: absolute; /* 添加绝对定位 */
		  top: 10rpx; /* 调整图片距顶部的距离 */
		  right: 10rpx; /* 调整图片距右侧的距离 */
		}
		
		.center{
			height: 70%;
			width: 750rpx;
			background: white;
			display: flex;
			justify-content: center; 
			align-items: center;
		}

	
		.tempbox {
			 display: flex;
			 // justify-content: center; /* 水平居中 */
			  align-items: center;
			  width: 60%;
			  background-color: #7B79DA; /* 浅蓝色背景 */
			  border-radius: 10rpx; /* 弧度 */
			  	 border: 2rpx solid #ffffff;
			  padding: 20rpx 24rpx; /* 内边距 */
			  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1); /* 投影效果，可选 */
			  // margin-left: 70rpx;
			  // margin-right: 100rpx;
			  margin-top: 20rpx;
		}
	.temp-icon {
	  width: 98rpx;
	  height: 92rpx;
	  margin-right: 10rpx; /* 图片和文字之间的间隔 */
	}
	
	.temp-text {
	  font-size: 24rpx;
	  // color:#515151;
	  
	  color: white;
	}

.centerimg{
	width: 680rpx;
	height: 590rpx;
	margin-top: 8rpx;
	 
}

	.modal-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.modal-content {
	  background: white;
	  border-radius: 10rpx;
	  width: 80%;
	  padding: 20rpx;
	}
	
	.modal-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 20rpx;
	}
	
	.modal-title {
	  font-size: 24rpx;
	  font-weight: bold;
	}
	
	.close-button {
	  font-size: 24rpx;
	  cursor: pointer;
	}
	
	.modal-body .form-group {
	  margin-bottom: 20rpx;
	  font-size: 20rpx;
	}
	
	.modal-body label {
	  display: block;
	  margin-bottom: 5rpx;
	}
	
	.modal-body input {
	  width: 100%;
	  height:100rpx;
	  padding: 10rpx;
	  border-radius: 10rpx;
	  border: 1rpx solid #ccc;
	}
	
	.modal-footer {
	  display: flex;
	  justify-content: space-between;
	}
	
	.delete-button, .confirm-button {
	 background-color: #7B79DA;
	 /* 浅蓝色背景 */
	 color: white;
	 padding: 5rpx 10rpx;
	 border: none;
	 border-radius: 5rpx;
	 /* 圆角边框 */
	 cursor: pointer;
	 font-size: 16rpx;
	 width: 260rpx;
	 margin-top: 15rpx;
	 margin-left: 15rpx;
	}
	

</style>
